<template>
	<m-layout :goBack="false" gap="0 24 70" barBg="unset" scrollColor="#8C74FF" :scrollTop="scrollTop">
		<m-icon type="logo4" wh="146 50" slot="back" :style="[opcity]"></m-icon>
		<view class="userinfo flex-between">
			<m-image :src="userinfo.headPicUrl || '00'" wh="136" radius="130"></m-image>
			<view class="center flex-1 align-left">
				<template v-if="isToken">
					<view class="flex">
						<m-text ftsize="40" weight="600" color="#333" :text="userinfo.nicKname"></m-text>
						<m-icon type="fwzx" wh="158 40" spa="0 0 0 15" v-if="userinfo.station == 1"></m-icon>
					</view>
					<view class="flex">
						<m-text ftsize="26" gap="10 0 0" color="#333" block>邀请码：</m-text>
						<m-text ftsize="26" gap="10 0 0" color="#333" block :text="userinfo.invcode"></m-text>
						<m-icon type="icon-fuzhi" color="#333" spa="0 0 0 15"
							@click="doCopy(userinfo.invcode)"></m-icon>
					</view>
				</template>
				<template v-else>
					<m-text ftsize="30" gap="10 0 0" color="#fff" block
						@click="Jump('/start?status=login')">未登录</m-text>
				</template>
			</view>
			<template v-if="isToken">
				<view class="flex">
					<m-icon type="icon-shezhi1" color="#fff" wh="40"
						@click="Jump('/pagesA/mine/userInfo/userInfo')"></m-icon>
				</view>
			</template>
			<template v-else>
				<m-button bgColor="#fff" color="var(--theme)" @click="Jump('/start?status=login')">去登录</m-button>
			</template>
		</view>

		<m-block className="align-center flex-around" bgColor="unset" spa="30 0 30" radius="20">
			<view class="dl ">
				<m-number :value="coin2" size="38 24" weight="700" color="#333"></m-number>
				<m-text spa="0 15" ftsize="26" color="#333">积分明细</m-text>
			</view>
			<view class="dl" @click="Jump('/pagesA/coupon/coupon')">
				<m-number :value="myownCount['valid']" size="38 24" weight="700" color="#333"></m-number>
				<m-text spa="0 15" ftsize="26" color="#333">优惠券</m-text>
			</view>
			<view class="dl">
				<m-number value="0" size="38 24" weight="700" color="#333"></m-number>
				<m-text spa="0 15" ftsize="26" color="#333">推荐奖励</m-text>
			</view>
		</m-block>

		<m-block className="flex" bgColor="unset" spa="20 0" @click="Jump('/pagesA/mine/vip/vip')">
			<image class="flex-1" src="http://117.24.6.18:5003/static/tzimg/VIPAD1.png" mode="widthFix" />
		</m-block>

		<m-block className="more-server" gap="24 0" spa="20 0">
			<view class="title flex-between" @click="Jump('/pagesA/order/order')">
				<text>我的订单</text>
				<m-icon size="24" color="#888" type="icon-qianjin" />
			</view>
			<view class="ul flex-between">
				<view class="li" @click="Jump('/pagesA/order/order?state=1')">
					<m-icon wh="48" type="orderstate1" />
					<text class="titles">待付款</text>
				</view>
				<view class="li" @click="Jump('/pagesA/order/order?state=2')">
					<m-icon wh="48" type="orderstate2" />
					<text class="titles">待发货</text>
				</view>
				<view class="li" @click="Jump('/pagesA/order/order?state=3')">
					<m-icon wh="48" type="orderstate3" />
					<text class="titles">待收货</text>
				</view>
				<view class="li" @click="Jump('/pagesA/order/order?state=4')">
					<m-icon wh="48" type="orderstate4" />
					<text class="titles">已完成</text>
				</view>
				<!-- 	<view class="li" @click="Jump('/pagesA/order/order?state=5')">
					<m-icon wh="48" type="orderstate5" />
					<text class="titles">已取消</text>
				</view> -->
				<view class="li" @click="Jump('/pagesA/shopping/aftersales/aftersales')">
					<m-icon wh="48" type="orderstate5" />
					<text class="titles">退换/售后</text>
				</view>
			</view>
		</m-block>
		<view class="flex-between">
			<m-block class="flex-1" gap="20" className="flex" @click="Jump('/pages/mine/group/group')">
				<m-image wh="90" src="http://117.24.6.18:5003/static/tzimg/mineMenu1.png" spa="0 15 0 0"></m-image>
				<view class="">
					<m-text block ftsize="28" color="#333333" weight="Bold">我的拼团</m-text>
					<m-text block ftsize="24" color="#999999" spa="20 0 0">一起拼 更便宜</m-text>
				</view>
			</m-block>
			<m-block class="flex-1" spa="0 0 0 15" gap="20" className="flex" @click="Jump('/pagesA/mine/group/group')">
				<m-image wh="90" src="http://117.24.6.18:5003/static/tzimg/mineMenu2.png" spa="0 15 0 0"></m-image>
				<view class="">
					<m-text block ftsize="28" color="#333333" weight="Bold">团长中心</m-text>
					<m-text block ftsize="24" color="#999999" spa="20 0 0">拼团好物放送</m-text>
				</view>
			</m-block>
		</view>

		<m-block spa="20 0">
			<m-text block gap="24 24 0" weight="800" ftsize="30">更多服务</m-text>
			<m-cell title="我的邀请" lIcon="icon-yaoqingren" @click="Jump(`/pages/mine/myteam/myteam`)"></m-cell>
			<m-cell title="关于我们" @click="Jump('/pagesA/mine/about/about')" lIcon="icon-bangzhuguanyuwomen"></m-cell>
			<m-cell title="收货地址" @click="Jump('/pagesA/mine/address/address')" lIcon="icon-wode-wodeshouhuodizhi"></m-cell>
			<m-cell title="在线服务" border="0" lIcon="icon-kefu" :rIcon="false">
				<m-button radius="10" gap="4 20" openType="contact" @click="openUrl({url:config715})" slot="right">
					联系
				</m-button>
			</m-cell>
		</m-block>
	</m-layout>
</template>

<script>
	import { creditTotal } from '@/api/Trade.js';
	import { coupons, couponTotal } from '@/api/Order.js'
	import { UserInfo, balance } from '@/api/Users';
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				hxShow: false,
				hxLoading: false,
				scrollTop: 0,
				couponsNum: 0,
				opcity: {
					'opacity': 0
				},
				myToken: false,
			};

		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
			let a = scrollTop / 1.3 / 100;
			this.opcity = {
				'opacity': a
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				config: state => state.general.config,
				userbalance: state => state.user.userbalance,
				myownCount: state => state.temporary.myownCount,
			}),
			coin2() {
				try {
					return this.userbalance[2]['balance']
				} catch (e) {
					return 0
				}
			},
			isToken() {
				return this.myToken
			},
			config715() {
				return this.config[715]
			},
		},
		onLoad() {},

		onShow() {
			this.myToken = this.Cookie.get('Token', false)
			if (this.isToken) {
				this.init()
			}

		},
		methods: {

			async init() {
				UserInfo();
				couponTotal()
			},

		},
		onPullDownRefresh() {
			this.init();
		},

	}
</script>

<style lang="scss">
	page {
		background: url('http://117.24.6.18:5003/static/tzimg/minebg.png') #f6f6f6 no-repeat;
		background-size: 100% 377rpx;
	}

	.balance-card {
		box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(133, 107, 255, 0.2);

		.line {
			width: 2rpx;
			height: 120rpx;
			background: rgba(255, 255, 255, 0.4);
		}
	}

	.userinfo {

		.center {
			padding: 0 20rpx;
		}
	}

	.integral {
		display: flex;
		width: 658rpx;
		min-width: unset !important;
		height: 118rpx;
		box-sizing: border-box;
		margin: 0 auto !important;
		margin-top: 40rpx !important;
	}



	.more-server {
		.title {
			padding: 0 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #141418;
		}

		.cell_box {
			.cell_right {
				flex: 1;
				padding-left: 42rpx;
			}
		}

		.ul {
			padding-top: 30rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			grid-row-gap: 30rpx;
			text-align: center;

			.titles {
				display: block;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.more-server2 {
		.ul {
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}

		.titles {
			font-size: 28rpx;
			font-weight: 700;
		}
	}



	.getPhone {
		padding: 4rpx 20rpx !important;
		display: inline-block;
		border-width: 0.5px;
		border-style: solid;
		border-color: var(--theme);
		border-image: initial;
		font-size: 26rpx;
		font-family: "PingFang SC", "PingFang SC";
		padding: 20rpx 34rpx;
		border-radius: 10rpx;
		background: var(--theme);
		color: #fff;
		line-height: unset;

		&::after {
			display: none;
		}

	}
</style>